<template>
    <div class="boxContentCss">
        <el-form ref="formRef" :model="form" label-position="right" label-width="auto">
            <EdCreateCard title="商品信息">
                <template #back>
                    <div class="createBack" @click="$utilsSet.goBack($router)" >
                        <svg-icon icon-class="back" /> 返回
                    </div>
                </template>
                <div class="zh_flex">
                    <el-row class="width-100">
                         <el-col :span="8">
                            <el-form-item label="商品状态：">
                                <span class="textStyle">
                                    <el-button class="ed-table-bottom ed_4_border" v-if="form.publishStatus == '0'">{{returnName(form['publishStatus'], selectPublishStatus.options) || '-'}}</el-button>
                                    <el-button class="ed-table-bottom ed_confirm_border" v-else>{{returnName(form['publishStatus'], selectPublishStatus.options) || '-'}}</el-button>
                                </span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="创建时间：">
                                <span class="textStyle">{{form.createTime || '-'}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="商品名称：">
                                <span class="textStyle">{{form.productName || '-'}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="width-100">
                        <el-col :span="8">
                            <el-form-item label="商品类别：">
                                <span class="textStyle">{{form['categoryName'] || '-'}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="核销方式：">
                                <span class="textStyle">{{returnName(form['verification'], selectVerifyMethod.options) || form['verification']  || '-'}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="商品限价：">
                                <span class="textStyle">{{form.productPrice || '-'}}元</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="width-100">
                        <el-col :span="8">
                            <el-form-item label="商品售价：">
                                <span class="textStyle" v-if="form['money']!=null">{{ form.money }}元</span>
                                <span class="textStyle" v-if="form.moneyPoint['money']!=null"> {{ form['money']!=null?'，':'' }} {{ form.moneyPoint['money'] }}元+{{ form.moneyPoint['point'] }}积分</span>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="8">
                            <el-form-item label="总库存：">
                                <span class="textStyle">{{form.totalInventory}}</span>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="8">
                            <el-form-item label="剩余库存：">
                                <!-- <span class="textStyle">{{ form.surplusStock ? form.surplusStock +'件' : '无限制' }}</span> -->
                                <span class="textStyle">{{ form['surplusStock'] ? form['surplusStock']+'件' : ( form['surplusStock']==0?form['surplusStock']:  '无限制') }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="width-100">
                        <el-col :span="16">
                            <el-form-item label="活动时间：">
                                <span class="textStyle">{{form.activityTime || '-'}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="商品图片：">
                                <div class="textStyle" v-if="form.productPics.length>0">
                                    <el-image 
                                        v-for="item in form.productPics"
                                        :key="item"
                                        :src="item" 
                                        :preview-src-list="form.productPics">
                                    </el-image>
                                </div>
                                <div v-else>-</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="商品详情：">
                                <!-- <EdTinymce v-if="form.descriptionType==2" ref="EdTinymce" v-model="form.description"></EdTinymce> -->
                                <!-- <div v-if="form.descriptionType==2" v-html="form.description || '-'"></div> -->
                                <el-collapse v-if="form.descriptionType==2" v-model="activeNames" @change="handleCollapseChange">
                                    <el-collapse-item name="1">
                                        <template slot="title">
                                        <el-button class="ed-button ed_black-bottom" size="mini">{{collapse_text}} <i :class="['el-icon--right', collapse_icon]"></i> </el-button>
                                        </template>
                                        <div v-html="form.description||'-'"></div>
                                    </el-collapse-item>
                                </el-collapse>
                                <div v-else class="textStyle urlStyle" @click="gotoUrl(form.productUrl)">{{form.productUrl || '-'}}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <el-form-item class="form_btns">
                    <el-button class="ed-button ed_black-bottom" :disabled="form.publishStatus==1" @click="update()">编辑</el-button>
                    <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
                </el-form-item>
            </EdCreateCard>
        </el-form>
    </div>
</template>

<script>
    import EdTinymce from 'src/components/EdTinymce.vue'
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdDateTimeRange from 'src/components/EdDateTimeRange.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import { defineComponent } from 'vue'
    import { productInfo, getResourceType } from "./api";
    import { returnName } from "src/utils/common.js";
    import Bus from 'src/utils/Bus';
    import { getDictByCode } from "src/api/dictionaries";
    export default defineComponent({
        name: "companyCreate",
        components: { EdCreateCard, EdDateTimeRange, EdSelect, EdTinymce },
        data(){
            return{
                form:{
                    productName: '',
                    // categoryId: '',
                    categoryName: '',
                    productPrice: '',
                    // productSellPrice: '',
                    money: '',
                    moneyPoint: {
                        money: '',
                        point: '',
                    },
                    publishStatus: '',
                    surplusStock: '',
                    createTime: '',
                    activityTime: '',
                    productPics: [],
                    descriptionType: '',
                    productUrl: '',
                    description: '',
                    verification: '',
                },
                pickerParams:{
                    valueFormat:"yyyy-MM-dd"
                },
                dialogImageUrl: '',
                dialogVisible: false,
                selectGoodsType:{
                    placeholder:"请选择商品类别",
                    options: [],
                    props: { value: 'code', label: 'categoryName' },
                },
                goodsInfoList: [
                    { value: '1', label: '输入地址' },
                    { value: '2', label: '输入图文' },
                ],
                selectPublishStatus:{
                    options: [{
                        value: '1',
                        label: '已上架'
                    }, {
                        value: '0',
                        label: '已下架'
                    }],
                },
                selectVerifyMethod:{
                    placeholder:"请选择核销方式",
                    options: [],
                },
                infoData: null,
                // 商品详情-折叠
                activeNames: ['1'],
                collapse_text: '收起',
                collapse_icon: 'el-icon-arrow-up'
            }
        },
        activated(){
            // 商品类别
            getResourceType({pageSize: 999999}).then(res=>{
                this.selectGoodsType.options = res.data;
            })
            // 核销方式
            getDictByCode('product_verify_method').then(res=>{
                this.selectVerifyMethod.options = res.data.items;
            })
            if(this.$route.query.id){
                // 编辑 
                this.isUpdate = true;
                this.productInfo();
            }else {
              
            }
        },
        deactivated(){
            this.form={
                productName: '',
                // categoryId: '',
                categoryName: '',
                productPrice: '',
                // productSellPrice: '',
                money: '',
                moneyPoint: {
                    money: '',
                    point: '',
                },
                publishStatus: '',
                surplusStock: '',
                createTime: '',
                activityTime: '',
                productPics: [],
                descriptionType: '',
                productUrl: '',
                description: '',
                verification: '',
            }
            // 清空editor的缓存
            if(this.$refs.EdTinymce) this.$refs.EdTinymce.$children[0].cache = '';
        },
        methods:{
            productInfo(){
                productInfo({id:this.$route.query.id}).then(response => {
                    if(response.success == true) {
                        this.form = {
                            id: response.data.id,
                            productName: response.data.productName,
                            // categoryId: response.data.categoryId,
                            categoryName: response.data.categoryName,
                            productPrice: response.data.productPrice,
                            money: response.data.money,
                            moneyPoint: {
                                money: response.data.moneyPoint.money,
                                point: response.data.moneyPoint.point,
                            },
                            // productSellPrice: response.data.productSellPrice,
                            publishStatus: response.data.publishStatus,
                            surplusStock: response.data.surplusStock,
                            createTime: response.data.createTime,
                            // publishTime: response.data.publishStartTime&&response.data.publishEndTime&& response.data.publishStartTime +'至'+response.data.publishEndTime,
                            activityTime: response.data.activityTime,
                            // activityTime: response.data.activityStartTime&&response.data.activityEndTime&& response.data.activityStartTime +'至'+response.data.activityEndTime,
                            productPics: response.data.productPics,
                            descriptionType: response.data.descriptionType,
                            productUrl: response.data.productUrl,
                            description: response.data.description,
                            verification: response.data.verification,
                        };
                        this.infoData = response.data;
                    }
                })
            },
            returnName(val, options, value, label){
                return returnName(val, options, value, label)
            },
            gotoUrl(url){
                window.open(url);
            },
            update(){
                this.$utilsSet.goBack(this.$router);
                Bus.$emit('product_goUpdate', this.infoData)
                // this.$router.push({
                //     path: '/shopping/resourcePool-update',
                //     query: { id: this.$route.query.id },
                // })
            },
            handleCollapseChange(val){
                this.collapse_text = val.length > 0 ? '收起' : '详情';
                this.collapse_icon = val.length > 0 ? 'el-icon-arrow-up' : 'el-icon-arrow-down';
            }
        },
    })
</script>

<style scoped lang="scss">
    :deep {
        .el-collapse{
            border: none;
            .el-collapse-item__header{
                border: none;
                .el-collapse-item__arrow{
                    display: none;
                }
            }
            .el-collapse-item__wrap{
                border: none;
            }
            .el-collapse-item__arrow{
                margin-left: 10px;
            }
        }
        .textStyle{
            font-family: 'Noto Sans SC';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            color: #414448;
            .el-image{
                width: 100px; 
                height: 100px;
                border: 1px solid #DEE0E6;
                border-radius: 8px;
                margin-right: 20px;
            }        
        }
        ol{
            list-style: decimal;
            padding-left: 20px;
        }
        ul{
            list-style: disc;
            padding-left: 20px;
        }
    }
    .urlStyle{
        color: #6F8EC6;
        cursor: pointer;
    }
</style>